<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<body>
		
		<div id="app">
			请输入数值：<input type="text" v-model.number="num1"/><br />
			<button @click="addNum1">计算</button><br />
			请输入数值：<input type="number" v-model.number="num"/><br />			
			<!-- 请输入数值：<input type="text" v-model="num"/><br /> -->
		
		<button @click="addNum">计算</button>
		<hr />
		<!-- trim去除空格 -->
		用户名：<input type="text" v-model.trim="username"/>
		<button @click="nameSize">长度</button>
		{{length}}
		
		<hr />
		<!-- 懒加载，当用户输入完成，才会触发 -->
		<input type="text" v-model.lazy="msg" />{{msg}}
		
		
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
				num:'',
				num1:'',
				username:'',
				length:0,
				msg:''
				},
				methods:{
					addNum(){
						//this.num=parseInt(this.num)+20
						this.num+=20
					},
					addNum1(){
						//this.num=parseInt(this.num)+20
						this.num1+=20
					},
					nameSize(){
						this.length=this.username.length
					}
				}
			})
		</script>
	</body>
</html>
